import MessageDrawer from "@/components/messageDrawer/index";
import { Operation } from "@/components/operation";
import {
	ClockCircleOutlined,
	EyeOutlined,
	UserOutlined,
} from "@ant-design/icons";
import { Avatar, Button, Tag } from "antd";
import { useState } from "react";
import { useParams } from "react-router-dom";
import styles from "./index.module.scss";
let key = 1;
const Index = () => {
	const [loading, setLoading] = useState(false);
	const [articleInfo, setArticleInfo] = useState<Record<string, any>>({
		id: "vsdvfret25345245" + key,
		star: {
			status: true,
			count: Math.floor(Math.random() * 40),
		},
		like: {
			status: true,
			count: Math.floor(Math.random() * 40),
		},
		message: {
			count: Math.floor(Math.random() * 30),
		},
	});
	const [isAttention, setIsAttention] = useState<boolean>(true);
	const [open, setOpen] = useState<boolean>(false);
	const params = useParams();
	console.log(params);

	const handleAttention = (id: string) => {
		//找到文章信息 传递作者id
		console.log("article", id);
		setIsAttention(!isAttention);
	};
	const handleClick = (id: string, str: string, value?: boolean) => {
		console.log(id, str, value);
		if (str === "messgae") {
			setOpen(true);
		} else {
			const data = structuredClone(articleInfo);
			if (str === "star") {
				console.log(data[str], id, 999999);
			} else if (str === "like") {
				console.log(data[str], id, 888888888);
			}
			data[str].status = value;
			if (!value) {
				data[str].count--;
			} else {
				data[str].count++;
			}
			setArticleInfo(data);
		}
	};
	return (
		<div className={styles.root}>
			<div className="box">
				<h2 className="title">999999999</h2>
				<div className="desc">
					<div className="info">
						<div className="auth mr">
							<UserOutlined /> {"悲伤小土豆"}
						</div>
						<div className="create mr">
							<ClockCircleOutlined />于{"2021-02-11 11:22:33"}发布
						</div>
						<div className="readCount mr">
							<EyeOutlined />
							阅读量56
						</div>
					</div>
					<div className="tag">
						<span>文章标签：</span>
						{[888, 999, 555, 6678].map((item,index) => {
							return (
								<Tag
								  key={index}
									onClick={() => {
										console.log(996633 + ",item");
									}}>
									{item}
								</Tag>
							);
						})}
					</div>
				</div>
				<div className="content">
					{Array.from({ length: 98 }).map((item, index) => (
						<p key={index}>556</p>
					))}
				</div>
			</div>
			<div className="footer">
				<div className="left">
					<Avatar
						shape="square"
						size={45}
						src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F4d40b566-1f0a-4f8d-bc97-c513df8775b3%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1708594603&t=9bf079e178f0b2683e63cb909f471cbf"
					/>
					<div className="ayuthname">{"xhui sdh sd "}</div>
					{isAttention ? (
						<Button
							size="large"
							onClick={() => handleAttention(params.id || "")}
							shape="round">
							关注
						</Button>
					) : (
						<Button
							size="large"
							onClick={() => handleAttention(params.id || "")}
							shape="round"
							className="attentioned">
							已关注
						</Button>
					)}
				</div>
				<div className="right">
					<Operation info={articleInfo} onClick={handleClick}></Operation>
				</div>
			</div>
			<MessageDrawer
				open={open}
				info={{ articleID: articleInfo.id, userID: "ascasc" }}
				onClose={() => setOpen(false)}
			/>
		</div>
	);
};

export default Index;
